{% extends "base.html" %} {% block title %} VisualViser {% endblock %} {% block js%}
<link href='site_media/style.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="site_media/js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="site_media/js/visualviser.js"></script>
<script type="text/javascript" src="site_media/js/d3.v2.js"></script>
{%endblock%} {% block head %}{% endblock %} {%block content %}
<div class="toggler">
	<form class="form-search" method="get" target="_self" action='/visualviser' style="float:right;">
		<div>
			<input id = 'ididid' type="text" class="style-search-query" name="query">
			<button type="submit" class="btn btn-primary">Search</button>
		</div>
	</form><br>
	<ul class="nav nav-tabs">
		<li class="active"><a href="#" onclick="tab1()">2013 IT Mega Trend</a></li>
		<li><a href="#" onclick="tab2()">Others...</a></li>
	</ul>
	
	<div class="row style-border">
		<div id="visualMenu">
			<div class="span4 style-header">
				<div id="dataset">
					<h2>Attributes</h2>
				</div>
				<br>
				<div id="cell_dataset" class="scroll">
					<ol id="selectable_dataset" class="selectable">
						<li id="Attribute0" class="btn btn-block btn-large" ondragstart="drag(this,event)" draggable="true">Valuable Big Data</li>
						<li id="Attribute1" class="btn btn-block btn-large" ondragstart="drag(this,event)" draggable="true">Progress in Cloud Services</li>
						<li id="Attribute2" class="btn btn-block btn-large" ondragstart="drag(this,event)" draggable="true">IT Consolidation</li>
						<li id="Attribute3" class="btn btn-block btn-large" ondragstart="drag(this,event)" draggable="true">Advanced Cyber Attacks</li>
						<li id="Attribute4" class="btn btn-block btn-large" ondragstart="drag(this,event)" draggable="true">Patents as Strategic Weapons</li>
						<li id="Attribute5" class="btn btn-block btn-large" ondragstart="drag(this,event)" draggable="true">Contextual Devices and Services</li>
						<li id="Attribute6" class="btn btn-block btn-large" ondragstart="drag(this,event)" draggable="true">Smart Vehicles</li>
						<li id="Attribute7" class="btn btn-block btn-large" ondragstart="drag(this,event)" draggable="true">Re-visioning of Green IT</li>
						<li id="Attribute8" class="btn btn-block btn-large" ondragstart="drag(this,event)" draggable="true">Rapid Business Development</li>
					</ol>
				</div>
				<br>
				
			</div>
			<div class="span4 style-header">
				<div id="analysis">
					<h2>Analysis</h2>
				</div>
				<br>
				<div id="cell_analysis" class="scroll">
					<ol id="selectable_analysis" class="selectable">
						<li id="Analysis1" title="" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Trend Analysis</li>
						<li id="Analysis2" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Association Mining</li>
						<li id="Analysis3" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Time Series Analysis</li>
						<li id="Analysis3" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Analysis of variance</li>
						<li id="Analysis3" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Boolean Analysis</li>
						<li id="Analysis3" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Cluster Analysis</li>
						<li id="Analysis3" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Factor Analysis</li>
						<li id="Analysis3" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Meta-Analysis</li>
						<li id="Analysis3" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Multivariate Analysis</li>
						<li id="Analysis3" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Principal component Analysis</li>
						<li id="Analysis3" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Regression Analysis</li>
						<li id="Analysis3" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Scale Analysis</li>
						<li id="Analysis3" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Sensitivity Analysis</li>
						<li id="Analysis3" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Sequential Analysis</li>
						<li id="Analysis3" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Spatial Analysis</li>
					</ol>
				</div>
				<br>
			</div>
			<div class="span4 style-header">
				<div id="chart">
					<h2>Chart</h2>
				</div>
				<br>
				<div  id="cell_chart" class="row scroll">
					<div id="cell_chart1" class="span2">
						<ol id="selectable_chart" class="selectable">
							<li id="Chart1" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Line Chart</li>
							<li id="Chart2" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Graph Chart</li>
							<li id="Chart3" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Grid Chart</li>
							<li id="Chart4" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Pie Chart</li>
						</ol>
					</div>
					<div id="cell_chart2" class="span2">
						<ol id="selectable_chart2" class="selectable">
							<li id="Chart5" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Word Cloud</li>
							<li id="Chart6" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Area Chart</li>
							<li id="Chart7" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Scatter Chart</li>
							<li id="Chart8" class="btn btn-large btn-block" ondragstart="drag(this,event)" draggable="true">Geo Chart</li>
						</ol>
					</div>
				</div>
				<br>
			</div>
		</div>
		<!-- end of visualmenu -->
	</div>
	<div id="options" class="row style-drag" onclick='toggleShowMenu()'>
		<div class="span4">
			<div class="style-option">
				Drag Attribute!<img src="site_media/img/arrow.PNG" width="40" height="40">
			</div><br>
			<div class="style-drop">
				<span id="att_option" class="style-label" onclick="deleteOption('att_option', 'Attribute 1');" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;">Attribute 1</span>
			    <span id="att2_option" class="style-label" onclick="deleteOption('att2_option', 'Attribute 2');" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;">Attribute 2</span>
			    <span id="att3_option" class="style-label" onclick="deleteOption('att3_option', 'Attribute 3');" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;">Attribute 3</span>
			</div><br>
		</div>
		<div class="span4">
			<div class="style-option">
				Drag Analysis!<img src="site_media/img/arrow.PNG" width="40" height="40">
			</div>
			<br>
			<div class="style-drop">
			 	<span id="anal_option" class="style-label" onclick="deleteOption('anal_option', 'Analysis');" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;">Analysis</span>
			</div><br>
		</div>
		<div class="span4">
			<div class="style-option">
					Drag Chart!<img src="site_media/img/arrow.PNG" width="40" height="40">
			</div>
			<br>
			<div class="style-drop">
				<span id="chart_option" class="style-label" onclick="deleteOption('chart_option', 'Chart 1');" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;">Chart 1</span>
				<span id="chart2_option" class="style-label" onclick="deleteOption('chart2_option', 'Chart 2');" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;">Chart 2</span>
			</div>
			<br>
		</div>
		
	</div>
		<!-- end of options -->
</div>
	<!-- end of row -->
<!-- end of div 'toggler' -->
<br>

<div class="row style-chart">
	<div id='table' class="style-header" style="margin-left: 0; margin-right: 0; background-image: url('/site_media/img/background_inverse.png'); background-repeat:no-repeat; border-radius: 10px; background-size: 1170px 450px;">
		<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
		<center>
			<font style="font-size: 36px; color: SILVER;"><b>VisualViser</b></font><br /> <br /> <font style="font-size: 12px; color: SILVER;">VisualViser is the best way to get an insight from a volume of numbers.<br /> Absolutely simple, easy and intuitive UX will help you
				analyze, visualize, <br /> explore data. Visual Viser is a brand new visual analytics.
			</font><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
		</center>
	</div>
	<div class="style-header">
		<div id='chart_div_parent' class="viser">
			<div id='chart_div_1' style="float: left;"></div>
			<div id='chart_div_2' style="float: left;"></div>
		</div>
	</div>
</div>
	{% if result == None %}
		
	{% else %}
		<div id="myModal" class="modal hide fade" style="width:800px;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <b><p id="myModalLabel" size="30"></p></b>
            </div>
            <div class="modal-body">
              <p id="newscontent">
              <table class='table table-striped table-condensed' >
				<b id="myQuery">{{ query }}</b> 검색{{size}} 건
				{% for r in result %}
				<tr>
					<td>
					<!-- <b><a data-toggle="modal" href="#myModal">{{r.title}}</a></b> -->
					<b><p>{{r.title}}</p></b>
					<p id="summary">{{r.summary|safe}}</p>
					</td>
					<td>
					{% if "valuable big data" in r.category %}
						<span class='trend trend0'>Valuable Big Data</span><br>
					{% endif %}
					{% if "Progress in Cloud Services" in r.category %}
						<span class='trend trend1'>Progress in Cloud Services</span><br>
					{% endif %}
					{% if "IT Consolidation" in r.category %}
						<span class='trend trend2'>IT Consolidation</span><br>
					{% endif %}
					{% if "Advanced Cyber Attacks" in r.category %}
						<span class='trend trend3'>Advanced Cyber Attacks</span><br>
					{% endif %}
					{% if "Patents as Strategic Weapons" in r.category %}
						<span class='trend trend4'>Patents as Strategic Weapons</span><br>
					{% endif %}
					{% if "Contextual Devices and Services" in r.category %}
						<span class='trend trend5'>Contextual Devices and Services</span><br>
					{% endif %}
					{% if "Smart Vehicles" in r.category %}
						<span class='trend trend6'>Smart Vehicles</span><br>
					{% endif %}
					{% if "Re-visioning of Green IT" in r.category %}
						<span class='trend trend7'>Re-visioning of Green IT</span><br>
					{% endif %}
					{% if "Rapid Business Development" in r.category %}
						<span class='trend trend8'>Rapid Business Development</span><br>
					{% endif %}
					</td>
				</tr>						
				{% endfor %}
				
				</table>                        
              </p>
            </div>
            <div class="modal-footer">
              <button class="btn btn-primary" data-dismiss="modal">Close</button>
              <!--  <button class="btn btn-primary">Save changes</button>-->
            </div>
          </div>
	{% endif %}
	
<link href='site_media/css/force.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='site_media/js/d3force.js'></script>
<script type='text/javascript' src='site_media/js/line.js'></script>
<script type='text/javascript' src='site_media/js/d3cooccur.js'></script>
<script type='text/javascript' src="site_media/js/d3.layout.cloud.js"></script>
<script type='text/javascript' src='site_media/js/d3WordCloud.js'></script>


{% endblock %}
